<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="false"
      :retry="false"
      @scroll="scroll"
      :refresher-enabled="!showHistory"
    >
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <template #top>
        <u-navbar
          back-text=""
          :is-back="true"
          :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="flex-1 px-4">
            <u-search
              :placeholder="search.placeholder"
              v-model="search.keyword"
              bg-color="#fff"
              :focus="search.focus"
              @search="searchFor"
              @custom="searchFor"
              @clear="clear"
              @change="change"
            ></u-search>
          </view>
        </u-navbar>
        <view class="p-4" v-if="showHistory && !vk.pubfn.isNull(vk.getVuex('$user.historyData'))">
          <view class="flex justify-between items-center">
            <view class="text-[.875rem] text-[#161A24]">搜索历史</view>
            <view v-if="isDeleted" @click="isDeleted = false">
              <image src="/static/dddr62.png" class="size-5" mode="aspectFill" />
            </view>
            <view class="flex gap-3 items-center" v-else>
              <view @click="deleteAll" class="text-[.875rem] text-[#8E9299]"> 全部删除 </view>
              <view class="h-[.5rem] border-r border-solid border-[#C0C4CC]"></view>
              <view class="text-[.875rem] text-[#00A9AB] font-medium" @click="isDeleted = true"> 完成 </view>
            </view>
          </view>
        </view>
        <view class="p-4" v-if="!showHistory">
          <view class="grid grid-cols-4 gap-2">
            <view
              v-for="(i, k) in tabList"
              @click="tabClick(k)"
              :class="tabIndex == k ? 'text-[#161A24] font-bold' : 'text-[#5C6068]'"
              class="bg-white rounded-full h-[1.75rem] flex justify-center items-center"
              :key="k"
            >
              <view class="text-[.75rem]">{{ i }}</view>
            </view>
          </view>
        </view>
      </template>
      <view class="flex flex-col gap-3 px-4">
        <view v-if="showHistory">
          <view class="flex flex-wrap gap-2 items-center">
            <view
              class="flex gap-1 items-center px-4 py-2 bg-white rounded-full"
              @click="selectHistory(i)"
              v-for="(i, k) in vk.getVuex('$user.historyData')"
              :key="k"
            >
              <text class="text-[.75rem] text-[#161A24]">{{ i }}</text>
              <image
                src="/static/dddr41.png"
                class="size-4"
                mode="aspectFill"
                v-if="!isDeleted"
                @click.stop="deleteOne(k)"
              />
            </view>
          </view>
        </view>

        <view v-if="!showHistory">
          <view v-if="tabIndex < 3" class="flex flex-col gap-3">
            <view
              v-for="(i, k) in dataList"
              :key="k"
              class="flex gap-2 bg-white shadow-[0rem_.125rem_1.5rem_0rem_rgba(12,27,76,0.04)] p-4 rounded-[.75rem] flex-col"
              @click="vk.navigateTo('/pages/index/details?id=' + i.id)"
            >
              <view class="flex gap-2 items-center h-[7.3125rem]">
                <view class="w-[5.5rem] rounded-[.5rem] flex-none relative h-full border">
                  <u-image :src="i.thumb" mode="aspectFill" class="!size-full" />
                  <image
                    v-if="i.is_paid_spot == 1 && i.is_paid == 0"
                    src="/static/dddr87.png"
                    class="h-[1.0625rem] absolute -left-[.1875rem] -top-[.125rem]"
                    mode="heightFix"
                  />
                  <image
                    v-if="i.is_paid_spot == 1 && i.is_paid == 1"
                    src="/static/dddr86.png"
                    class="h-[1.0625rem] absolute -left-[.1875rem] -top-[.125rem]"
                    mode="heightFix"
                  />
                  <view class="size-full flex overflow-hidden absolute inset-0 flex-col flex-grow justify-between p-1">
                    <view></view>
                    <view class="flex justify-between items-center">
                      <view
                        v-for="(img, imgIndex) in (i?.images || []).slice(0, 3)"
                        :key="imgIndex"
                        class="relative"
                        :class="imgIndex > 0 ? '-ml-3' : ''"
                      >
                        <view
                          class="size-[1.5rem] rounded-[.3125rem] border-[.0625rem] border-solid border-[#FFFFFF] relative z-[1] overflow-hidden"
                          :style="`z-index: ${3 - imgIndex};`"
                        >
                          <u-image :src="img" class="!size-full" mode="aspectFill" />
                        </view>
                      </view>
                      <view class="text-[.875rem] text-transparent ml-1">+{{ i?.images?.length || 0 }}</view>
                    </view>
                  </view>
                </view>
                <view class="flex flex-col justify-between w-full h-full">
                  <view class="flex justify-between items-center">
                    <view class="text-[1rem] text-[#161A24] font-bold line-clamp-1">{{ i.name }}</view>

                    <view class="px-[.4375rem] py-[.1875rem] rounded-full bg-[#F2F5F7]" v-if="i.distance">
                      <view class="text-[.625rem] text-[#5C6068] font-bold">
                        {{ i.distance }}
                      </view>
                    </view>
                  </view>
                  <view class="text-[.8125rem] text-[#5C6068] line-clamp-1"> {{ i.description }} </view>
                  <view class="flex flex-wrap gap-1 items-center">
                    <view
                      v-for="(i, k) in i?.ext?.fish_species || []"
                      :key="k"
                      class="px-[.375rem] py-[.0625rem] bg-[#F2F5F7] rounded-[.25rem]"
                    >
                      <view class="text-[.625rem] text-[#5C6068]"> {{ i.name }} </view>
                    </view>
                  </view>
                  <view class="flex justify-between items-center">
                    <view class="flex items-center text-[.6875rem] text-[#5C6068] gap-1">
                      <view class="flex items-center">
                        <image
                          :src="vk.myfn.handleImageUrl(i.weather?.lives?.[0]?.item)"
                          mode="aspectFill"
                          class="!size-[.875rem]"
                        />
                        <text class="ml-[.125rem]">{{ i.weather?.lives?.[0]?.weather || '未知天气' }}</text>
                      </view>
                      <text class="h-[.5rem] border-l border-solid border-[#C1C4C9]"></text>
                      <text>{{ i.weather?.lives[0].temperature }}°C</text>
                      <text class="h-[.5rem] border-l border-solid border-[#C1C4C9]"></text>
                      <text>{{ i.weather?.lives[0]?.district || '未知区域' }}</text>
                    </view>
                    <view class="flex relative justify-end">
                      <view
                        class="bg-gradient-to-r from-[#FFBF3A]/30 to-white h-[.375rem] w-[115%] absolute rounded-[.1875rem] bottom-1 z-20"
                      >
                      </view>
                      <view class="flex relative z-20 items-baseline gap-[0.0625rem]">
                        <text class="font-[oxanium] text-[1.125rem] text-[#002021] font-bold">{{
                          (i.score || 0).toFixed(1)
                        }}</text>
                        <text class="text-[.625rem] text-[#002021]">分</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <u-line />

              <!-- 免费 -->
              <view class="flex justify-between items-center" v-if="!i.is_paid_spot">
                <view class="flex gap-1 items-center">
                  <image src="/static/dddr17.png" class="size-4" mode="aspectFill" />
                  <view class="text-[.6875rem] text-[#5C6068]">{{ i.location_name }}</view>
                </view>
                <image src="/static/dddr47.png" class="size-7" mode="aspectFill" />
              </view>
              <view class="flex justify-between items-center" v-else>
                <view class="flex gap-1 items-center">
                  <view class="flex items-center">
                    <view
                      class="size-5 flex overflow-hidden justify-center items-center -ml-2 bg-gray-200 rounded-full border"
                      :style="`z-index: ${5 - k};`"
                      v-for="(i, k) in i.purchased_users.slice(0, 3)"
                      :key="k"
                    >
                      <image
                        :src="i.avatar ? vk.myfn.handleImageUrl(i.avatar) : '/static/dddr103.png'"
                        class="size-full"
                        mode="aspectFill"
                      />
                    </view>
                  </view>
                  <view class="text-[.6875rem] text-[#00A9AB]" v-if="i.sold_count"
                    >{{ i.sold_count }}人已解锁该钓点</view
                  >
                  <view class="flex gap-1 items-center" v-else>
                    <image src="/static/dddr131.png" mode="aspectFill" class="size-4" />
                    <view class="text-[.6875rem] text-[#00A9AB]">解锁此钓点查看视频指路</view>
                  </view>
                </view>
                <view class="relative">
                  <image src="/static/dddr66.png" mode="heightFix" class="h-[1.6875rem] w-auto" />
                  <view class="absolute top-0 left-0 w-[2.5rem] h-[1.6875rem] z-10 flex justify-center items-center">
                    <view class="text-[.875rem] font-bold text-[#fff] before:content-[''] before:text-[.5rem]">{{
                      Math.floor(i.paid_amount)
                    }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="tabIndex === 3" class="flex flex-col gap-3">
            <view
              v-for="(i, k) in dataList"
              :key="k"
              class="flex justify-between items-center"
              @click="toUserDetail(i)"
            >
              <view class="flex gap-2 items-center">
                <u-image :src="i.avatar" shape="circle" class="!size-[3rem] bg-white" mode="aspectFill" />
                <view class="flex flex-col">
                  <view class="text-[.875rem] text-[#161A24] font-medium"> {{ i.nickname }} </view>
                  <view class="text-[.75rem] text-[#5C6068]"> 钓点{{ i.basan_num }}个 </view>
                </view>
              </view>
              <view class="bg-[#00A9AB] rounded-full px-3 py-1 flex items-center justify-center">
                <text class="text-[.75rem] text-[#FFFFFF] font-medium">Ta的主页</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </yy-paging>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        isDeleted: true, // 是否删除
        showHistory: true, // 是否显示搜索历史
        tabList: ['全部', '手杆', '路亚', '用户'], // 标签列表
        tabIndex: 0, // 当前标签索引
        search: {
          placeholder: '搜索想找的鱼种、钓点名称', // 搜索框占位符
          keyword: '', // 搜索关键词
          focus: true // 是否获取焦点
        }
      }
    },
    onLoad() {
      // 模拟搜索历史数据
      setTimeout(() => {
        this.$refs.paging.complete(vk.getVuex('$user.historyData'))
      }, 0)
    },

    methods: {
      alertConfirm() {
        vk.setVuex('$user.historyData', [])
        this.$refs.paging.reload()
      },
      toUserDetail(i) {
        vk.navigateTo('/pages/my/otherIndex?id=' + i.id)
      },
      selectHistory(i) {
        this.showHistory = false
        this.search.keyword = i
        this.$refs.paging.reload()
      },
      change(e) {
        if (e.length == 0) {
          this.showHistory = true
        }
      },
      tabClick(k) {
        this.tabIndex = k
        this.$refs.paging.reload()
      },
      clear() {
        this.search.keyword = ''
        this.showHistory = true
        this.$refs.paging.reload()
      },
      searchFor() {
        console.log('this.search.keyword==> ', this.search.keyword)
        this.showHistory = false
        this.$refs.paging.reload()
      },
      deleteOne(k) {
        let historyData = vk.getVuex('$user.historyData')
        historyData.splice(k, 1)
        vk.setVuex('$user.historyData', historyData)
        console.log('99999==> ', 99999)
        this.$refs.paging.reload()
      },
      deleteAll() {
        this.$refs.alert.config({
          show: true,
          title: '清空历史记录',
          describe: '确定要清空所有搜索历史记录吗？清空后将无法恢复。',
          cancel: '取消',
          cancelColor: '#000',
          confirm: '确定清空',
          confirmColor: '#00A9AB',
          eventType: 'deleteAll'
        })
      },
      scroll(e) {
        // this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        // 如果搜索关键词不为空，则将其添加到历史记录中
        if (this.search.keyword) {
          let historyData = vk.getVuex('$user.historyData') || []
          // 如果已存在相同关键词则先删除
          const index = historyData.indexOf(this.search.keyword)
          if (index > -1) {
            historyData.splice(index, 1)
          }
          // 将新关键词添加到数组开头
          historyData.unshift(this.search.keyword)
          // 限制历史记录最多保存10条
          if (historyData.length > 10) {
            historyData = historyData.slice(0, 10)
          }
          vk.setVuex('$user.historyData', historyData)
        }
        console.log('this.showHistory==> ', this.showHistory)

        if (this.showHistory) {
          this.$refs.paging.complete(vk.getVuex('$user.historyData'))
          return
        }

        const searchTypes = {
          1: { basan_type: 1 },
          2: { basan_type: 2 },
          3: { search_type: 1 }
        }

        let obj = {
          page,
          limit,
          keywords: this.search.keyword,
          ...(searchTypes[this.tabIndex] || {})
        }
        let res = await api.getSearchList(obj)
        this.showHistory = false
        this.$refs.paging.complete(res.data)
      }
    }
  }
</script>

<style lang="scss" scoped></style>
